<template>
  <div class="account-binding">
    <el-table :data="socialAccounts" border style="width: 100%">
      <el-table-column prop="provider" label="第三方平台" width="180">
        <template #default="scope">
          <span>{{ getProviderName(scope.row.provider) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="账号">
        <template #default="scope">
          <span v-if="scope.row.userId">{{ scope.row.username || 'N/A' }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="createdDate" label="绑定时间" width="180" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button v-if="scope.row.userId" type="danger" size="small" @click="unbind(scope.row)">解绑</el-button>
          <el-button v-else type="primary" size="small" @click="bind(scope.row.provider)">绑定</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { authBinding, getSocialBindingList, unbindSocialAccount } from '@/api/login'
import { ElMessage, ElMessageBox } from 'element-plus'

const socialAccounts = ref([
  { provider: 'gitee', providerName: 'Gitee', username: '', nickName: '', userId: '', createdDate: '' },
  { provider: 'github', providerName: 'GitHub', username: '', nickName: '', userId: '', createdDate: '' },
  { provider: 'maxkey', providerName: 'MaxKey', username: '', nickName: '', userId: '', createdDate: '' },
  { provider: 'wechat', providerName: '微信', username: '', nickName: '', userId: '', createdDate: '' },
  { provider: 'dingtalk', providerName: '钉钉', username: '', nickName: '', userId: '', createdDate: '' }
])

/**
 * 获取用户社交账号绑定信息
 */
async function getBindingList() {
  try {
    const response = await getSocialBindingList()
    if (response.code === "0") {
      // 更新绑定状态
      socialAccounts.value.forEach(account => {
        const boundAccount = response.data.find((item: any) => item.provider === account.provider)
        if (boundAccount) {
          Object.assign(account, boundAccount)
        }
      })
    }
  } catch (error) {
    console.error('获取绑定信息失败', error)
  }
}

/**
 * 绑定授权
 * @param source
 */
async function handleAuthBinding(source: string) {
  try {
    // 获取授权页面链接
    const response = await authBinding(source, '1', window.location.origin);
    window.location.href = response.data;
  } catch (error) {
    console.error('绑定失败', error);
    ElMessage.error('绑定失败')
  }
}

function getProviderName(provider: string) {
  const providers: Record<string, string> = {
    'gitee': 'Gitee',
    'github': 'GitHub',
    'maxkey': 'MaxKey',
    'wechat': '微信',
    'dingtalk': '钉钉'
  }
  return providers[provider] || provider
}

function bind(provider: string) {
  // 调用实际的绑定接口
  handleAuthBinding(provider);
}

function unbind(account: any) {
  ElMessageBox.confirm(`确定要解除 ${getProviderName(account.provider)} 账号的绑定吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      const response = await unbindSocialAccount(account.id)
      if (response.code === "0") {
        ElMessage.success('解绑成功')
        // 更新本地状态
        account.userId = ''
        account.username = ''
        account.createdDate = ''
      } else {
        ElMessage.error(response.message || '解绑失败')
      }
    } catch (error) {
      console.error('解绑失败', error)
      ElMessage.error('解绑失败')
    }
  }).catch(() => {
    // 取消操作
  })
}

onMounted(() => {
  // 获取账号绑定信息
  getBindingList()
})
</script>

<style scoped>
.account-binding {
  padding: 20px;
}
</style>